<template>
  <div class="first_level_page brand_list_page">
    <div class="brand_demo left" v-for="img in brandList" >
        <img :src="img.brandImg.split(',')[0]"  @click="getGoodsList(img.id)">
    </div>

    <div class="clear"></div>

    <!--         <transition name="loading">
                <loading v-if="showLoading"></loading>
            </transition> -->
  </div>
</template>

<script>
import {mapState} from 'vuex'
import loading from 'src/components/common/loading'
import {listBName} from 'src/service/brand';

export default {
  data() {
    return {
      brandList: null, //品牌列表
      showLoading: true, //显示加载动画
    }
  },
  created() {
    this.getBrandList();
  },
  mounted() {

  },
  components: {
    scroll,
    loading,
  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
  methods: {
    /** 查询商品品牌列表 */
    getBrandList() {
      listBName().then(response => {
        this.brandList = response.data.data;
        console.log(this.brandList)
      });
    },

    getGoodsList(id){
      this.$router.push({
        path: '/goodsList', query: {brandId:id}
      })
    },

  }
}
</script>

<style lang="scss">
@import 'src/style/mixin';

.brand_list_page {
  padding-left: .2rem;
  padding-bottom: .2rem;

  .brand_demo {
    background: #fff;
    margin-right: .2rem;
    margin-top: .2rem;
    @include wh(3.45rem, 1.8rem);
    @include sc(.3rem, #333);
    text-align: center;
    line-height: 1.8rem;

    img {
      @include wh(3.45rem, 1.8rem);
    }
  }
}
</style>
